<template>
  <div class="title-setting-view">
    <div class="header">
      <span>title 设置:    <a
            href="https://blog.csdn.net/weixin_55181759/article/details/124838942"
            >title设置大全
          </a></span>
      <van-switch v-model="titleObj.show" @change="openChange" size="24px" />
    </div>
    <template v-if="titleObj.show">
      <div v-for="(item, idx) in settingArr" :key="idx" class="header-item">
        <div class="label">{{ item.title }}</div>
        <div class="select-view">
          <div
            :class="[
              'select-item',
              val.value === item.selected && 'active-item',
            ]"
            v-for="(val, Idt) in item.list"
            :key="Idt"
            @click="setSettingData(item, val)"
          >
            {{ val.label }}
          </div>
        </div>
        <van-icon
          v-if="item.question"
          name="question"
          class="question-btn"
          @click="getToastMissage(item.question)"
        />
      </div>
      <!-- 位置控制 -->
      <div class="header-item">
        <div class="label">位置(单位)：</div>
        <div class="select-view">
          <div class="position-item">
            <span class="label">x轴(px)： </span>
            <van-stepper
              @change="getStepperX"
              input-width="30px"
              button-size="22px"
              style="display: inline-block"
              min="0"
            />
          </div>
          <div class="position-item">
            <span class="label">y轴(%)： </span>
            <van-stepper
              @change="getStepperY"
              input-width="30px"
              button-size="22px"
              style="display: inline-block"
              min="0"
              max="100"
            />
          </div>
        </div>
        <van-icon
          name="question"
          class="question-btn"
          @click="getToastMissage('单位可以是（number 和 px 和 % ）')"
        />
      </div>
    </template>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "titleSetting",
  props: {
    option: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      titleObj: {
        show: true, // 是否显示标题组件,（true/false）
        text: "折线图主标题", // 主标题文本，支持使用\n换行
        textAlign: "auto", //整体水平对齐（包括text和subtext）
        textVerticalAlign: "auto", //整体的垂直对齐（包括text和subtext）  'top/bottm/middle'
        padding: 0, // 标题内边距 写法如[5,10]||[ 5,6, 7, 8] ,
        top: "auto", // title组件离容器上侧距离
        left: "auto", // title组件离容器左侧距离，写法如'5'||'5%' 也可以设置 'left/center/right'
        right: "auto", //'title组件离容器右侧距离
        bottom: "auto", // title组件离容器下侧距离
        borderColor: "#1e1e1e", // 标题边框颜色
        borderWidth: 0, // 边框宽度（默认单位px）
        link:'https://echarts.apache.org/zh/option.html#title',
        target:'blank',  //self/blank link链接（当前窗口/新窗口）打开
        textStyle: {
          color: "#1e1e1e",
          fontStyle: "", //字体风格
          fontSize: 14, //字体大小 可以是数组和字符，14||"14px"
          fontWeight: 800, //字体粗细
          fontFamily: "", //文字字体
          lineHeight: 26, //字体行高
          align: "center", //文字水平对齐方式（left/right）
          verticalAlign: "middle", //文字垂直对齐方式（top/bottom）
        },
        subtext: "快来点我 ↑", // 副标题
        subtextStyle: {
          // 副标题样式
          color: "#ccc",
          fontStyle: "normal",
          fontWeight: "normal",
          fontFamily: "sans-serif",
          fontSize: 12,
          lineHeight: 12,
        },
      },
      settingArr: [
        {
          title: "color 字色：",
          selected: "#1e1e1e",
          fieldName: "color",
          list: [
            {
              label: "耀金黑",
              value: "#1e1e1e",
            },
            {
              label: "苍松绿",
              value: "#99ee75",
            },
            {
              label: "海军蓝",
              value: "#98ddfc",
            },
            {
              label: "流光紫",
              value: "#dd99ff",
            },
          ],
        },
        {
          title: "size 字号：",
          selected: "14",
          fieldName: "fontSize",
          list: [
            {
              label: "小号",
              value: "12",
            },
            {
              label: "中号",
              value: "14",
            },
            {
              label: "大号",
              value: "18",
            },
            {
              label: "超大号",
              value: "24",
            },
          ],
        },
        {
          title: "边框宽度：",
          selected: "0",
          fieldName: "borderWidth",
          list: [
            {
              label: "无边框",
              value: "0",
            },
            {
              label: "小边框",
              value: "1",
            },
            {
              label: "中边框",
              value: "3",
            },
            {
              label: "大边框",
              value: "5",
            },
          ],
        },
        {
          title: "边框色：",
          selected: "#1e1e1e",
          fieldName: "borderColor",
          list: [
            {
              label: "耀金黑",
              value: "#1e1e1e",
            },
            {
              label: "苍松绿",
              value: "#99ee75",
            },
            {
              label: "海军蓝",
              value: "#98ddfc",
            },
            {
              label: "流光紫",
              value: "#dd99ff",
            },
          ],
        },
        {
          title: "padding",
          selected: 0,
          fieldName: "padding",
          question: "单位是Number类型",
          list: [
            {
              label: "无边距",
              value: 0,
            },
            {
              label: "小边距",
              value: 1,
            },
            {
              label: "中边距",
              value: 5,
            },
            {
              label: "大边距",
              value: 10,
            },
          ],
        },
        {
          title: "title位置：",
          selected: "auto",
          fieldName: "left",
          question: "使用left设置边框位置， 也可以设置Number 和 百分比 值",
          list: [
            {
              label: "auto",
              value: "auto",
            },
            {
              label: "居左",
              value: "left",
            },
            {
              label: "居中",
              value: "center",
            },
            {
              label: "居右",
              value: "right",
            },
          ],
        },
        {
          title: "x轴对齐方式:",
          selected: "auto",
          fieldName: "textAlign",
          question: "选项：auto/left/center/right",
          list: [
            {
              label: "auto",
              value: "auto",
            },
            {
              label: "左对齐",
              value: "left",
            },
            {
              label: "中间对齐",
              value: "center",
            },
            {
              label: "右对齐",
              value: "right",
            },
          ],
        },
        {
          title: "y轴对齐方式:",
          selected: "auto",
          fieldName: "textVerticalAlign",
          question: "选项：auto/top/bottom/middle",
          list: [
            {
              label: "auto",
              value: "auto",
            },
            {
              label: "上对齐",
              value: "left",
            },
            {
              label: "中间对齐",
              value: "middle",
            },
            {
              label: "下对齐",
              value: "bottom",
            },
          ],
        },
      ],
    };
  },
  methods: {
    openChange() {
      this.$emit("titleEvent", this.titleObj);
    },
    getToastMissage(value) {
      Toast({
        message: value,
        // icon: "question-o",
      });
    },
    setSettingData(item, val) {
      item.selected = val.value;
      if (["color", "fontSize"].indexOf(item.fieldName) !== -1) {
        this.titleObj.textStyle[item.fieldName] = val.value;
        //设置行高和字号相同 行高也可以省略不写
        this.titleObj.textStyle.lineHeight = this.titleObj.textStyle.fontSize;
      }
      if (
        ["borderWidth", "borderColor", "padding", "left", 'textAlign'].indexOf(
          item.fieldName
        ) !== -1
      ) {
        this.titleObj[item.fieldName] = val.value;
      }
      this.$emit("titleEvent", this.titleObj);
    },

    // 位置设置X轴
    getStepperX(value) {
      if (value) {
        this.titleObj.left = value + "px";
      }
      this.$emit("titleEvent", this.titleObj);
    },
    // 位置设置y轴
    getStepperY(value) {
      if (value) {
        this.titleObj.top = value + "%";
      }
      this.$emit("titleEvent", this.titleObj);
    },
  },
};
</script>

<style lang="scss" scoped>
.title-setting-view {
  margin: 4px 0;
  background-color: #fff;
  padding: 0 16px;
  overflow: hidden;
  .header {
    margin: 10px 10px 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header-item {
    position: relative;
    display: flex;
    height: 42px;
    align-items: center;
    border-top: 1px solid #eee;
    .label {
      width: 90px;
      font-size: 14px;
      text-align: left;
    }
    .select-view {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .select-item {
        font-size: 14px;
        padding: 4px 8px;
        border: 1px solid #aaa;
        border-radius: 4px;
        cursor: pointer;
      }
      .active-item {
        border: 1px solid #4285f4;
      }
      .position-item {
        // display: flex;
        .label {
          font-size: 14px;
          vertical-align: sub;
        }
      }
    }
    .question-btn {
      position: absolute;
      right: -10px;
      top: 0px;
      font-size: 18px;
      color: #fc532f80;
    }
  }
}
</style>